<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页的高度</title>
    <style>
        body{margin: 0;}
    </style>

</head>
<body>
<h1>aaa</h1>
<h1>aaa</h1>

<div id="box" style="height:500px;overflow:scroll;background-color: red;border:5px solid blue;">
    adfadfa
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>ddddddddddddddddddddddddddddddddddddddddfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
    adsf<br>
</div>

        <script>
            var box = document.getElementById('box');
            console.log(box.scrollHeight);//总的；包括不可见的滚动条滚动部分的高度也在内
            console.log(box.clientHeight);//183 边框以内的高度；不带滚动条;可见的边框的高
            console.log(box.offsetHeight);//200 // 设置的元素div的高；也带上了滚动条的高度（滚动条的高度一般在17px），如果不带滚动条的高度就和clientHeight一样



            console.log(box.offsetLeft);// 设置的元素div的高；也带上了滚动条的高度（滚动条的高度一般在17px），如果不带滚动条的高度就和clientHeight一样
            console.log(box.offsetTop); //设置的元素div的高；也带上了滚动条的高度（滚动条的高度一般在17px），如果不带滚动条的高度就和clientHeight一样
            console.log("*****************");


            console.log(box.clientTop);       //边框的宽度
            console.log(box.clientLeft);       //边框的宽度

        </script>
</body>
</html>